<template>
    <div class="head-line">个人信息</div>

    <div class="info-content" style="width: 100%; padding: 0 10px;">
        <el-descriptions class="margin-top" title="" :column="3" :size="size" border>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <user />
                        </el-icon>
                        用户名称
                    </div>
                </template>
                <!-- {{info.value.}} -->
                {{ info.username }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <iphone />
                        </el-icon>
                        用户年龄
                    </div>
                </template>
                {{ info.userage }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <location />
                        </el-icon>
                        性别
                    </div>
                </template>
                {{info.usergender}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <tickets />
                        </el-icon>
                        部门
                    </div>
                </template>

                <el-tag size="small">{{info.userdepartment}}</el-tag>
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <office-building />
                        </el-icon>
                        电话
                    </div>
                </template>
                {{info.userphone}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <office-building />
                        </el-icon>
                        邮箱
                    </div>
                </template>
                {{info.useremail}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <office-building />
                        </el-icon>
                        今日目标
                    </div>
                </template>
                {{info.usertarget}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <office-building />
                        </el-icon>
                        部门目标
                    </div>
                </template>
                {{info.deptar}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <office-building />
                        </el-icon>
                        打卡天数
                    </div>
                </template>
                {{info.daysclocking}}天
            </el-descriptions-item>

        </el-descriptions>
    </div>


</template>
<script>
    import { ref, reactive, onMounted } from "vue";
    import axios from 'axios';

    // 导入刚刚定义的Pinia状态管理器中的useUserStore仓库
    import { useUser } from '@/stores/login'
    import { storeToRefs } from 'pinia'

    export default {
        name: 'SupfilemdNav',
        setup() {

            // 创建变量接受
            const store = useUser();

            let { user_name, if_users } = storeToRefs(store)

            // let info = ref();
            let if_id = ref();
            let info = reactive(
                {
                    id: "",
                    username: "",
                    punchtime: "",
                    daysclocking: "",
                    passwd: "",
                    usergender: "",
                    useremail: "",
                    userage: "",
                    userphone: "",
                    usertarget: "",
                    userdepartment: "",
                    deptar: ""
                }
            );

            onMounted(async () => {
                await axios.get("http://localhost:8080/departments/")
                    .then(function (response) {
                        info.deptar = response.data.data[0].departmentweektarget
                    })
                    .catch(function (error) {
                        console.log(error);
                    })

                // console.log();
                // console.log(user_name.value);
                // console.log(if_users.value.name);

                let url = "http://localhost:8080/users/";
                await axios.get(url)
                    .then(function (response) {
                        // console.log(response.data.data);
                        let array01 = response.data.data;

                        // 判断是哪个用户
                        for (let index = 0; index < array01.length; index++) {
                            let element = array01[index].username;
                            let id = array01[index].id;
                            // console.log(element);

                            if (element === if_users.value.name) {
                                // console.log("成功");
                                console.log("当前id：", id);
                                if_id.value = id;

                            } else {
                                console.log("失败");
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })

                await axios.get(`http://localhost:8080/users/${if_id.value}`)
                    .then(function (response) {
                        console.log("???", response.data.data);
                        // info = response.data.data;
                        // log.value();
                        console.log("这个info是：", info.id);
                        // return info;

                        info.id = response.data.data.id
                        info.username = response.data.data.username
                        info.punchtime = response.data.data.punchtime
                        info.daysclocking = response.data.data.daysclocking
                        info.passwd = response.data.data.passwd
                        info.usergender = response.data.data.usergender
                        info.useremail = response.data.data.useremail
                        info.userage = response.data.data.userage
                        info.userphone = response.data.data.userphone
                        info.usertarget = response.data.data.usertarget
                        info.userdepartment = response.data.data.userdepartment
                    })
                    .catch(function (error) {
                    })

                // console.log();
            })

            // 获取当前账号的相关信息
            // function getInfo() {

            // }


            return {
                // getInfo
                info
            }
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .head-line {
        width: 100%;
        height: 50px;
        position: relative;
        line-height: 50px;
        /* border: 1px solid red; */
        font-weight: 600;
        background: #fff;
        padding-left: 20px;
        /* margin-bottom: 15px; */
    }

    .head-line::after {
        content: "";
        position: absolute;
        left: 0;
        top: 16px;
        margin-left: 10px;
        display: block;
        width: 3.5px;
        height: 18px;
        background: #51B37F;
        border-radius: 5px;
        /* border: 1px solid red; */
    }

    .el-form {
        /* height: 250px; */
        padding: 0 500px 0 20px;
        background: #fff;
        /* border: 1px solid red; */
    }

    .v-md-editor {
        /* border: 1px solid red; */
        margin-top: 10px;
    }

    .but-box {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 1px solid red; */
    }

    .el-button {
        /* margin-top: 15px; */
        padding: 0 10px;
        /* margin-bottom: 15px; */
        background: #51B37F;
    }
</style>